<template>
  <div class="card">
    <h2>待办事项</h2>
    
    <!-- 添加新任务 -->
    <div class="add-todo">
      <input 
        v-model="newTodo" 
        @keyup.enter="addTodo"
        placeholder="输入新的待办事项..."
        class="todo-input"
      />
      <button @click="addTodo" class="btn btn-primary">添加</button>
    </div>

    <!-- 任务列表 -->
    <div class="todo-list">
      <div 
        v-for="(todo, index) in todos" 
        :key="index"
        class="todo-item"
        :class="{ completed: todo.completed }"
      >
        <input 
          type="checkbox" 
          v-model="todo.completed"
          class="todo-checkbox"
        />
        <span class="todo-text">{{ todo.text }}</span>
        <button 
          @click="removeTodo(index)" 
          class="btn btn-danger btn-sm"
        >
          删除
        </button>
      </div>
    </div>

    <!-- 统计信息 -->
    <div class="todo-stats">
      <p>总计: {{ todos.length }} 项</p>
      <p>已完成: {{ completedCount }} 项</p>
      <p>未完成: {{ activeCount }} 项</p>
    </div>
  </div>
</template>

<script setup>
import { ref, computed } from 'vue'

// 响应式数据
const todos = ref([
  { text: '学习 Vue3', completed: false },
  { text: '构建示例项目', completed: true },
  { text: '掌握 Composition API', completed: false }
])

const newTodo = ref('')

// 计算属性
const completedCount = computed(() => 
  todos.value.filter(todo => todo.completed).length
)

const activeCount = computed(() => 
  todos.value.filter(todo => !todo.completed).length
)

// 方法
const addTodo = () => {
  if (newTodo.value.trim()) {
    todos.value.push({
      text: newTodo.value.trim(),
      completed: false
    })
    newTodo.value = ''
  }
}

const removeTodo = (index) => {
  todos.value.splice(index, 1)
}
</script>

<style scoped>
.card {
  background: white;
  border-radius: 12px;
  padding: 24px;
  box-shadow: 0 8px 32px rgba(0,0,0,0.1);
  backdrop-filter: blur(10px);
  border: 1px solid rgba(255,255,255,0.2);
}

.card h2 {
  text-align: center;
  margin-bottom: 20px;
  color: #333;
  font-size: 1.5rem;
}

.add-todo {
  display: flex;
  gap: 10px;
  margin-bottom: 20px;
}

.todo-input {
  flex: 1;
  padding: 12px;
  border: 2px solid #e9ecef;
  border-radius: 8px;
  font-size: 1rem;
  transition: border-color 0.3s ease;
}

.todo-input:focus {
  outline: none;
  border-color: #667eea;
}

.btn {
  padding: 12px 20px;
  border: none;
  border-radius: 8px;
  font-size: 1rem;
  font-weight: bold;
  cursor: pointer;
  transition: all 0.3s ease;
}

.btn:hover {
  transform: translateY(-2px);
  box-shadow: 0 4px 12px rgba(0,0,0,0.2);
}

.btn-primary {
  background: #007bff;
  color: white;
}

.btn-danger {
  background: #dc3545;
  color: white;
}

.btn-sm {
  padding: 6px 12px;
  font-size: 0.8rem;
}

.todo-list {
  margin-bottom: 20px;
}

.todo-item {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 12px;
  border-bottom: 1px solid #e9ecef;
  transition: background-color 0.3s ease;
}

.todo-item:hover {
  background-color: #f8f9fa;
}

.todo-item.completed {
  opacity: 0.6;
}

.todo-checkbox {
  width: 18px;
  height: 18px;
  cursor: pointer;
}

.todo-text {
  flex: 1;
  font-size: 1rem;
}

.todo-item.completed .todo-text {
  text-decoration: line-through;
  color: #6c757d;
}

.todo-stats {
  text-align: center;
  color: #666;
  font-size: 0.9rem;
  padding-top: 15px;
  border-top: 1px solid #e9ecef;
}

.todo-stats p {
  margin: 5px 0;
}
</style> 